<template>
	<view class="training-container">
		<!-- 顶部标签栏 -->
		<view class="tab-bar">
			<view class="tab-item " v-for="item,index in tabbar" :class="{'active': item.value == active}" @click="change(item)">{{item.name}}</view>
			
		</view>

		<!-- 视频列表 -->
		<view class="video-list">
			<block v-if="videoList.length> 0">
				<view class="video-item" v-for="(item, index) in videoList" :key="index" @click="playVideo(item)">
					<view class="video-cover">
						<image :src="item.videoPage" mode="aspectFill"></image>
						<view class="play-icon">
							<image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/e6efe4194796409b.png"
								mode="aspectFit"></image>
						</view>
						<view class="video-info-overlay">
							<view class="info-header">
								<view class="video-title text-ellipsis">{{ item.title }}</view>
								<view class="video-time">{{ item.createdAt }}</view>
							</view>
							<view class="video-desc text-overflow">{{ item.detail }}</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<no-data></no-data>
			</block>
		</view>

		
	</view>
</template>

<script>
	import { selectVideoList } from '@/apis/knowledge/index.js'
	import noData from '@/components/common/tip/no-data.vue'
	import {
		buyVideo,
		nurseVipPay
	} from '@/apis/purchase-member/purchase-member.js'
	export default {
		components: {
			noData
		},
		data() {
			return {
				showVideo: false,
				currentVideo: '',
				mp: '',
				active: 0,
				tabbar: [
					{ name: '护士专区', value: 0},
					{ name: '护工专区', value: 1},
					{ name: '陪诊专区', value: 2},
				],
				videoList: [],
				isVip: 0
			}
		},
		onShow() {
			
			this.selectVideoList()
		},
		methods: {
			selectVideoList() {
				let form = {
					nurseId: this.$store.state.userInfo.id,
					type: 0,
					category: this.active
				}
				selectVideoList(form).then((res)=>{
					this.videoList = res.object
					this.isVip = res.data
				})
			},
			change(item) {
				this.active = item.value
				this.selectVideoList()
			},
			async payOptions(item) {
				console.log("item",item)
				let payInfo = {}
				payInfo.nurseId = this.$store.state.userInfo.id
				payInfo.videoId = item.id
				let res = await buyVideo(payInfo)
				console.log('支付111111111111111', res)
				if(res.success) {
					let obj = {
						id : item.id,
						number: res.object.number
					}
					let res1 = await nurseVipPay(obj)
					console.log('支付222222222222', res1)
					if (res1.success) {
						uni.requestPayment({
							provider:  'wxpay',
							timeStamp: res1.object.timeStamp, // 时间戳（单位：秒）
							nonceStr: res1.object.nonceStr, // 随机字符串
							package: res1.object.package, // 固定值
							signType: res1.object.signType, //固定值
							paySign: res1.object.paySign, //签名
							orderInfo: res1.object,
							success(r) {
								console.log(r, '支付成功！')
								const videoUrlFromParam = {
									src: item.video,
									poster: item.videoPage,
								}
								uni.navigateTo({
									url: `/pages/videoPlay/videoPlay?videoUrlFromParam=${encodeURIComponent(JSON.stringify(videoUrlFromParam))}`
								})
							},
							fail(e) {
								console.log(e, '支付失败！')
								// 跳转到待付款的界面内
								setTimeout(function() {}, 1000)
								
							},
							complete(c) {
								this.selectVideoList()
							},
						})
					}
				}
				
			},
			playVideo(item) {
				// this.currentVideo = item.videoUrl
				// this.showVideo = true
				// item.isBuy this.isVip || 
				if(this.isVip || item.isBuy) {
					const videoUrlFromParam = {
						src: item.video,
						poster: item.videoPage,
					}
					uni.navigateTo({
						url: `/pages/videoPlay/videoPlay?videoUrlFromParam=${encodeURIComponent(JSON.stringify(videoUrlFromParam))}`
					})
				} else {
					uni.showModal({
						title: "请购买会员或单独购买视频后进行观看！",
						confirmText: '去支付',
						success: (res)=>{
							console.log(res.confirm)
							if(res.confirm) {
								this.payOptions(item)
							}
						}
						
					})
				}
				
			},
			
		}
	}
</script>

<style lang="less">
	.training-container {
		background: #F5F6FA;
		min-height: 100vh;

		.tab-bar {
			display: flex;
			height: 88rpx;
			background: #ffffff;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

			.tab-item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #333333;

				&.active {
					color: #3c8eff;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 4rpx;
						background: #3c8eff;
						border-radius: 2rpx;
					}
				}
			}
		}

		.video-list {
			padding: 30rpx 24rpx;

			.video-item {
				margin-bottom: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

				.video-cover {
					position: relative;
					width: 100%;
					height: 372rpx;

					image {
						width: 100%;
						height: 100%;
					}

					.play-icon {
						position: absolute;
						left: 50%;
						top: 40%;
						transform: translate(-50%, -50%);
						width: 68rpx;
						height: 68rpx;
						// background: rgba(0, 0, 0, 0.5);
						border-radius: 50%;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.video-info-overlay {
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						padding: 10rpx;
						background: #110101;
						height: 84rpx;
						.info-header {
							display: flex;
							justify-content: space-between;
							margin-bottom: 4rpx;
							.video-title {
								font-size: 24rpx;
								color: #FFFFFF;
								line-height: 44rpx;
							}
							
							.video-time {
								font-size: 24rpx;
								color: #9B9B9B;
							}
						}
						.video-desc {
							font-size: 20rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}

	
</style>